<template>
  <div>
    <el-popover placement="bottom-start" width="400" trigger="manual" v-model="popoverVisible">

      <el-badge :value="total" :max="99" class="item" slot="reference">
        <i class="el-icon-bell" style="font-size: 25px;text-align: center;line-height: 52px;"
          @click="popoverVisible = !popoverVisible"></i>
      </el-badge>

      <el-menu mode="horizontal" active-text-color="#40aaf7" :default-active="activeIndex" @select="handleSelect"
        class="el-menu-demo">
        <el-menu-item index="1">设备异常({{ deviceTotal }})</el-menu-item>
        <el-menu-item index="2">库存不足({{ storeTotal }})</el-menu-item>
      </el-menu>

      <!-- 消息内容 循环部分 -->
      <div class="box">
        <div class="notification_text" v-for="item in content" :key="item.id" @click="getNoticeDetail(item)">
          <img src="@/assets/images/store.png" v-show="activeIndex == '1'" class="left_image" />
          <img src="@/assets/images/device.png" v-show="activeIndex == '2'" class="left_image" />
          <div class="text">
            <p>{{ item.title }}</p>
            <p style="font-size: 12px; color: #ccc">{{ formatDate(item.publishTime) }}</p>
          </div>
        </div>

        <div class="notification_text" v-if="content.length == 0">
          <div class="text">
            <p>暂时没有新消息</p>
          </div>
        </div>
        <div class="notification_text" v-if="noMore">
          <div class="text">
            <p>已加载全部</p>
          </div>
        </div>

        <!-- 底部按钮部分 -->
        <div class="bottom_button">
          <!-- 这个地方不能换行不然会因为inlineblock出现4px的空隙把按钮顶下去！！ -->
          <span class="bottom_button_left" @click="readList">标记已读</span><span class="bottom_button_right"
            @click="getMore">加载更多</span>
        </div>
      </div>
    </el-popover>

    <el-dialog :title="selRow.title" :visible.sync="centerDialogVisible" width="30%" center>
      <span style="font-size: 15px;">{{ " " + selRow.content }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="readNotice()">已 读</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import noticeApi from '@/api/notice/notice'
export default {
  data() {
    return {
      activeIndex: '1',
      popoverVisible: false,
      total: 0,
      deviceTotal: 0,
      storeTotal: 0,
      devicNoticeList: [],
      storeNoticeList: [],
      List: [],
      content: [],
      page: 1,
      loading: false,
      noMore: false,
      centerDialogVisible: false,
      selRow: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getTotal()
      this.getDeviceNotice()
      this.getStoreNotice()
    },
    formatDate(originVal) {
      const dt = new Date(originVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`;
    },
    getTotal() {
      noticeApi.getNotReadTotal().then(response => {
        this.total = response.data
        if (this.total < 1) {
          this.total = ''
        }
      })
    },
    getDeviceNotice() {
      noticeApi.getNotReadAndDevice().then(response => {
        this.devicNoticeList = response.data
        this.List = response.data
        this.deviceTotal = this.devicNoticeList.length
        this.page = 1
        this.noMore = false
        this.content = this.List.slice(0, 5)
      })
    },
    getStoreNotice() {
      noticeApi.getNotReadAndStore().then(response => {
        this.storeNoticeList = response.data
        this.storeTotal = this.storeNoticeList.length
      })
    },
    async handleSelect(key, keyPath) {
      this.activeIndex = key
      this.page = 1
      this.noMore = false
      this.content = []
      this.getTotal()
      if (key == '1') {
        await noticeApi.getNotReadAndDevice().then(response => {
          this.devicNoticeList = response.data
          this.deviceTotal = this.devicNoticeList.length
          this.List = this.devicNoticeList
          this.content = this.List.slice(0, 5)
        });
      } else {
        await noticeApi.getNotReadAndStore().then(response => {
          this.storeNoticeList = response.data
          this.storeTotal = this.storeNoticeList.length
          this.List = this.storeNoticeList
          this.content = this.List.slice(0, 5)
        });
       
      }
      
    },
    getMore() {
      if (this.List.length < this.page * 5) {
        this.noMore = true
      } else {
        this.content.push(...this.List.slice(this.page * 5, (this.page + 1) * 5))
        this.page++
      }
    },
    getNoticeDetail(item) {
      this.centerDialogVisible = true
      this.selRow = item
    },
    readNotice() {
      noticeApi.readNotice(this.selRow.id).then(response => {
        this.centerDialogVisible = false
        //this.content 剔除本消息
        this.content = this.content.filter(item => item.id !== this.selRow.id)
        //总数-1
        this.total--
        if (this.activeIndex == '1') {
          this.deviceTotal--
        } else {
          this.storeTotal--
        }
      })
    },
    async readList() {
      if(this.content.length<1){
        return
      }
      await noticeApi.readList(this.content).then(response => {
        this.page = 1
        this.noMore = false
        this.content = []
      })

       this.getTotal()
        if (this.activeIndex == '1') {
          noticeApi.getNotReadAndDevice().then(response => {
            this.devicNoticeList = response.data
            this.deviceTotal = this.devicNoticeList.length
            this.List = this.devicNoticeList
          this.content = this.List.slice(0, 5)
          });
        } else {
          noticeApi.getNotReadAndStore().then(response => {
            this.storeNoticeList = response.data
            this.storeTotal = this.storeNoticeList.length
            this.List = this.storeNoticeList
            this.content = this.List.slice(0, 5)
          });
         
        }


    }

  }
};
</script>

<style lang="scss" scoped>
.el-badge {

  ::v-deep .el-badge__content {

    margin-top: 12px;

  }

}

.el-menu-demo .el-menu-item,
.el-submenu__title {
  height: 35px;
  line-height: 35px;
}

.el-menu-demo {
  padding: 0 20px;
}

//图片
.left_image {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -20px;
}

//每一条
.notification_text {
  width: 100%;
  height: 80px;
  border-bottom: 1px #ccc solid;
  position: relative;
}

//底部按钮
.bottom_button {
  width: 330px;
  height: 50px;
  border-top: #ccc 1px solid;
  position: absolute;
  bottom: 0;
  left: 0;
}

//左右按钮
.bottom_button_left,
.bottom_button_right {
  display: inline-block;
  width: 164px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

//左按钮
.bottom_button_left {
  border-right: solid 1px #ccc;
}

//左按钮
.bottom_button_left:hover {
  color: #40aaf7;
}

//右按钮
.bottom_button_right:hover {
  color: #40aaf7;
}

//文字部分位置
.text {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 65px;
}

//内容部分超出隐藏，给滚动条
.box {
  overflow: auto;
  height: 400px;
  margin-bottom: 37px;
}

//滚动条的样式
::-webkit-scrollbar {
  //滚动条宽高
  width: 5px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  //滚动条颜色和圆角
  background-color: #dbd9d9;
  border-radius: 3px;
}
</style>